<template>
    <div>
        <NavTop /> 
        <div>
            
            <el-container class="product-container">
                    <el-aside width="800px">
                        <div class="demo-image__preview">
                            <el-image
                                style="max-width: 100%; height:auto;width: 500px;margin-left: 200px;"
                                :src="list.bigImg"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :preview-src-list="list.moreImg"
                                :initial-index="4"
                                fit="cover"
                            />
                        </div>
                    </el-aside>
                    <el-container>
                        <el-header>
                            <span style="margin-top: 20px;font-size: 20px;font-weight: bold;color: sienna;font-family: 'SimSun', '宋体', serif;">商品名称：{{ list.name }}</span><br>
                            <br><br>
                            <span style="font-size: 20px;color: sienna;font-family: 'SimSun', '宋体', serif;">价格：{{ list.price }}</span><br>
                            <br><br>
                            <span style="font-size: 20px;color: sienna;font-family: 'SimSun', '宋体', serif;">优惠价格：{{list.onlineprice}}</span><br>
                            <br><br>
                            <span style="font-size: 20px;color: sienna;font-family: 'SimSun', '宋体', serif;">描述：{{list.dis}}</span><br>
                            <br><br>
                        </el-header>
                        
                        <br><br><br><br><br><br><hr><br><br><br><br><br>
                        <el-main>
                            <span style="margin-left: 5px;font-size: 20px;font-weight: bold;color: sienna;font-family: 'SimSun', '宋体', serif;">商品个数</span><br><br><br>
                            <el-button @click="decrease()" type="info" plain class="num-button">-</el-button>
                            <span style="margin-left: 5px;margin-right: 5px;">{{ num }}</span>
                            <el-button @click="increase()" type="info" plain class="num-button">+</el-button>
                        </el-main>
                        <br>
                        <el-footer>
                            <el-button @click="buy()" type="info" plain class="action-button">购买</el-button>
                            <el-button @click="addCart()" type="info" plain class="action-button">加入购物车</el-button>
                        </el-footer>
                </el-container>
            </el-container>
            
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { ElMessageBox } from 'element-plus'
import { useGoodsStore } from '@/store/goods';

export default {
    components:{
        NavTop
    },
    mounted(){
        this.list = this.$route.query
    },
    data() {
        return {
            list:[],
            time:new Date(),
            store:useGoodsStore(),
            num:1

        }
    },
    methods: {
        buy(){
            this.data = this.list
            //打印订单号
            this.orderID=this.time.getFullYear().toString() + (this.time.getMonth()+1).toString() + this.time.getDate().toString() + 
            Math.random().toString().slice(2,10)
            console.log(this.orderID);

            //把商品信息添加到订单数组中去
            this.store.orderAdd({
                orderID:this.orderID,
                time:new Date(),
                num:this.num,
                sum:this.num * this.data.onlineprice,
                isOrdered:false,//设置一个变量，用来记录订单支付运算
                child:[{id:this.data.id,name:this.data.name,num:this.num,onlineprice:this.data.onlineprice,total:this.num*this.data.onlineprice}] //展开运算符，通常用来把一个数组逐一进行操作，相当于进行了循环
            })

            ElMessageBox.alert('订单已生成，请前往订单页面完成支付！', '亲亲', {
                confirmButtonText: '知道了',  
            })
        },
        addCart(){
            this.data = this.list
            this.store.cartAdd({
                id:this.data.id,
                name:this.data.name,
                price:this.data.price,
                onlineprice:this.data.onlineprice,
                num: this.num,
                total:this.num*this.data.onlineprice 
            }) //调用store中的方法

            ElMessageBox.alert('小主，商品已加入，感谢购物！', '亲亲', {
                confirmButtonText: '知道了',  
            })
        },
        decrease(){
            if(this.num>=1){
                this.num--
            }
        },
        increase(){
            this.num++
        }
    }
}
</script>
<style>
    .num-btn{
        margin-top: 20px; 
        display: flex;
        align-items: center;
    }
   
    .action-button {
        margin-left: 5px; 
        font-size: 20px;
        background-color: blanchedalmond;
        border-color: aliceblue;
        font-family: 'SimSun', '宋体', serif;
    }

    .action-button:hover {
        background-color: rgb(230, 203, 168);
        border-color:rgb(230, 203, 168);
    }
    .num-button:hover {
        background-color: rgb(230, 203, 168);
        border-color: rgb(230, 203, 168);
    }
    .num-button{
        background-color: blanchedalmond;
        border-color: aliceblue;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
    .product-container{
        margin: auto;
        border: 4px solid rgb(197, 179, 155);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 200px;
        border-radius: 8px;
        background-image: url('/src/image/image.png');
        background-size: contain
    }
</style>